<template>
  <div class="setBody" v-if="baseParam != null">
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">是否允许玻璃从大线入笼</span></el-col
      >
      <el-col :span="14"
        ><span class="descript_value">
          <!-- <el-switch
            v-model="baseParam.object.allowBigLineInCage"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->
          <el-radio-group v-model="baseParam.object.allowBigLineInCage">
            <el-radio :label="true">开启</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
        </span></el-col
      >
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"><span class="descript">是否大线玻璃优先</span></el-col>
      <el-col :span="14"
        ><span class="descript_value">
          <!-- <el-switch
            v-model="baseParam.object.allowBigLineFirst"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->
          <el-radio-group v-model="baseParam.object.allowBigLineFirst">
            <el-radio :label="true">开启</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
        </span></el-col
      >
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">是否启动大线进钢化炉</span></el-col
      >
      <el-col :span="14"
        ><span class="descript_value">
          <!-- <el-switch
            v-model="baseParam.object.allowBigLineInFur"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->
          <el-radio-group v-model="baseParam.object.allowBigLineInFur">
            <el-radio :label="true">开启</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
        </span></el-col
      >
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">小车排片间隔(笼前)</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
          <span v-show="spaceCageFront" @click="handlerSpace('spaceCageFront')">
            {{ baseParam.object.spaceCageFront }}</span
          >
          <el-input-number
            v-show="!spaceCageFront"
            size="mini"
            ref="spaceCageFront"
            v-model="baseParam.object.spaceCageFront"
            @blur="handlerSpace('spaceCageFront')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10">
        <span class="descript">小车排片间隔(笼后)</span>
      </el-col>
      <el-col :span="14">
        <div class="descript_value">
          <span
            v-show="spaceCageBehind"
            @click="handlerSpace('spaceCageBehind')"
          >
            {{ baseParam.object.spaceCageBehind }}</span
          >
          <el-input-number
            v-show="!spaceCageBehind"
            size="mini"
            ref="spaceCageBehind"
            v-model="baseParam.object.spaceCageBehind"
            @blur="handlerSpace('spaceCageBehind')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"><span class="descript">炉前最大宽度</span></el-col>
      <el-col :span="14">
        <div class="descript_value">
          <span
            class="descript_value"
            v-show="maxWidthFront"
            @click="handlerSpace('maxWidthFront')"
            >{{ baseParam.object.maxWidthFront }}
          </span>
          <el-input-number
            v-show="!maxWidthFront"
            size="mini"
            ref="maxWidthFront"
            v-model="baseParam.object.maxWidthFront"
            @blur="handlerSpace('maxWidthFront')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"><span class="descript">炉前发车最小宽度</span></el-col>
      <el-col :span="14">
        <div class="descript_value">
          <span
            class="descript_value"
            v-show="postWidth"
            @click="handlerSpace('postWidth')"
          >
            {{ baseParam.object.postWidth }}</span
          >
          <el-input-number
            v-show="!postWidth"
            size="mini"
            ref="postWidth"
            v-model="baseParam.object.postWidth"
            @blur="handlerSpace('postWidth')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">限制五线进笼最大宽度</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
          <span
            v-show="maxFiveInCageWidth"
            @click.stop="handlerSpace('maxFiveInCageWidth')"
            >{{ baseParam.object.maxFiveInCageWidth }}</span
          >
          <el-input-number
            v-show="!maxFiveInCageWidth"
            size="mini"
            ref="maxFiveInCageWidth"
            v-model="baseParam.object.maxFiveInCageWidth"
            @blur="handlerSpace('maxFiveInCageWidth')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">限制五线进笼最大厚度</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
          <span
            v-show="maxFiveInCageThick"
            @click.stop="handlerSpace('maxFiveInCageThick')"
            >{{ baseParam.object.maxFiveInCageThick }}</span
          >
          <el-input-number
            v-show="!maxFiveInCageThick"
            size="mini"
            ref="maxFiveInCageThick"
            v-model="baseParam.object.maxFiveInCageThick"
            @blur="handlerSpace('maxFiveInCageThick')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
        <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">限制五线进笼最大高度</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
           <span
          v-show="maxFiveInCageHight"
          @click.stop="handlerSpace('maxFiveInCageHight')"
          >{{ baseParam.object.maxFiveInCageHight }}</span
        >
        <el-input-number
          v-show="!maxFiveInCageHight"
          size="mini"
          ref="maxFiveInCageHight"
          v-model="baseParam.object.maxFiveInCageHight"
          @blur="handlerSpace('maxFiveInCageHight')"
        ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">允许放同一格的X轴差</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
          <span
            class="descript_value"
            v-show="allowInEqualCellX"
            @click="handlerSpace('allowInEqualCellX')"
          >
            {{ baseParam.object.allowInEqualCellX }}</span
          >
          <el-input-number
            v-show="!allowInEqualCellX"
            size="mini"
            ref="allowInEqualCellX"
            v-model="baseParam.object.allowInEqualCellX"
            @blur="handlerSpace('allowInEqualCellX')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="10"
        ><span class="descript">允许放同一格的Y轴差</span></el-col
      >
      <el-col :span="14">
        <div class="descript_value">
          <span
            class="descript_value"
            v-show="allowInEqualCellY"
            @click="handlerSpace('allowInEqualCellY')"
          >
            {{ baseParam.object.allowInEqualCellY }}</span
          >
          <el-input-number
            v-show="!allowInEqualCellY"
            size="mini"
            ref="allowInEqualCellY"
            v-model="baseParam.object.allowInEqualCellY"
            @blur="handlerSpace('allowInEqualCellY')"
          ></el-input-number>
        </div>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      type="flex"
      align="middle"
      v-if="baseParam.object.hasOwnProperty('forceA37TONext')"
    >
      <el-col :span="10"
        ><span class="descript">A37是否强制进入下个台子</span></el-col
      >
      <el-col :span="14"
        ><span class="descript_value">
          <el-switch
            v-model="baseParam.object.forceA37TONext"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch></span
      ></el-col>
    </el-row>
    <el-row
      :gutter="20"
      type="flex"
      align="middle"
      v-if="baseParam.object.hasOwnProperty('forceA361TOA39')"
    >
      <el-col :span="10"
        ><span class="descript">A361是否强制进入A39</span></el-col
      >
      <el-col :span="14"
        ><span class="descript_value">
          <el-switch
            v-model="baseParam.object.forceA361TOA39"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch></span
      ></el-col>
    </el-row>
    <div class="footer">
      <el-button @click="drawer()">取消</el-button>
      <el-button type="primary" @click="handlerEditDevice">确定</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { deviceEditParam } from "@/api/assembly/device";
export default {
  props: {
    drawer: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      baseParam: null,
      spaceCageFront: true,
      spaceCageBehind: true,
      maxWidthFront: true,
      postWidth: true,
      allowInEqualCellX: true,
      allowInEqualCellY: true,
      maxFiveInCageWidth: true,
      maxFiveInCageHight: true,
      maxFiveInCageThick: true,
    };
  },
  methods: {
    handlerEditDevice() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          deviceEditParam(this.baseParam).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改设备状态成功");
              this.drawer();
            } else {
              this.$message.error("修改设备状态失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlerSpace(e) {
      this[e] = !this[e];
      this.$nextTick(() => {
        !this[e] && this.$refs[e].focus();
      });
    },
    getBaseParam() {},
  },
  created() {},
  watch: {
    baseParamList() {
      if (this.baseParam == null) {
        this.baseParam = this.baseParamList[0];
      }
    },
    handlerEditDevice() {},
  },
  computed: {
    ...mapState({
      baseParamList: (state) => state.deviceStatus.deviceParams || null,
    }),
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  width: 49%;
}
.setBody {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.el-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
  min-height: 40px;
}
.descript {
  font-size: 16px;
  letter-spacing: 1px;
}
.descript_value {
  float: right;
  font-size: 16px;
}
.footer {
  width: 100%;
  margin-top: auto;
  padding: 10px 5px;
}
</style>
